<template>
	<view class="body">
		<view class="box">
			<view class="card">
				<view class="code">订单编号：{{info.orderSn}}</view>
				<view class="main">
					<image class="img" :src="info.productPic" mode=""></image>
					<view class="info">
						<view class="p1">
							<view class="name">{{info.productName}}</view>
							<view class="price">￥{{info.productPrice}}</view>
						</view>
						<view class="p2">
							<view class="sn">编号：{{info.productId}}</view>
							<view class="number">x{{info.productCount}}</view>
						</view>
						<view class="p3" v-for="item in info.productAttr">
							<view>{{item.key}}:</view>
							<view>{{item.value}}</view>
						</view>
					</view>
				</view>
				<view class="totalPrice">总计：￥{{info.returnAmount}}</view>
			</view>
			
			<view class="items">
				<view class="left">退单数量：</view>
				<input class="ipt" type="text" :value="info.productCount" disabled="true"/>
			</view>
			<view class="items">
				<view class="left">退货原因：</view>
				<input class="ipt" type="text" :value="info.reason" disabled="true" placeholder="退货原因"/>
			</view>
			<view class="items">
				<view class="left">退货公司：</view>
				<view class="ipt">{{companyName}}</view>
			</view>
			<view class="items">
				<view class="left">问题描述：</view>
				<input class="ipt" type="text" :value="info.reason" disabled="true" placeholder="问题描述"/>
			</view>
			
			<view class="upload">
				<view class="top">
					<view class="title">温馨提示</view>
					<view class="bottom">
						上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
					</view>
				</view>
				<view class="uploadImg">
					<view class="list" v-for="item1 in info.proofPics">
						<image class="img" :src="item1" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="empty"></view>
			
			<view class="items">
				<view class="left">订单状态：</view>
				<view class="ipt">{{info.status | statusText}}</view>
			</view>
			<view class="items">
				<view class="left">处理人：</view>
				<view class="ipt">{{info.handleMan}}</view>
			</view>
			<view class="items">
				<view class="left">处理时间：</view>
				<view class="ipt">{{info.handleTime}}</view>
			</view>
			<view class="items">
				<view class="left">处理意见：</view>
				<view class="ipt">{{info.handleNote}}</view>
			</view>
			<view class="items">
				<view class="left">接收人：</view>
				<view class="ipt">{{info.returnName}}</view>
			</view>
			<view class="items">
				<view class="left">接受时间：</view>
				<view class="ipt">{{info.receiveTime}}</view>
			</view>
			<view class="items">
				<view class="left">备注：</view>
				<view class="ipt">{{info.receiveNote}}</view>
			</view>
			<view class="items">
				<view class="left">客服电话：</view>
				<view class="ipt">(0371) 5560 2883</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderReturn,
		getCompanyAddrss
	} from "../../../../api/my/index.js"
	export default {
		data() {
			return {
				info: [],
				companyList:[]
			};
		},
		onLoad(options) {
			orderReturn(options.id).then(res => {
				res.data.orderReturnApply.productAttr = JSON.parse(res.data.orderReturnApply.productAttr);
				res.data.orderReturnApply.proofPics = res.data.orderReturnApply.proofPics == "" ? [] : res.data.orderReturnApply.proofPics
					.split(",");
				this.info = res.data.orderReturnApply;
				console.log(res)
			});
			getCompanyAddrss().then(res=>{
				console.log(res)
				this.companyList = res.data.items
			})
		},
		computed:{
			companyName(){
				var result = this.companyList.find(ele=>ele.id == this.info.companyAddressId);
				if(result){
					return result.addressName
				}else{
					return ''
				}
			}
		},
		filters:{
			statusText(val){
				if(val == 0 ){
					return "等待处理"
				}else if(val == 1 ){
					return "确认退货，等待发货"
				}else if(val == 2){
					return "已退款"
				}else if(val == 3){
					return "已拒绝"
				}else if(val == 9){
					return "拒绝退货"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F1ECE7;
	}

	.box {
		padding: 15px;
		box-sizing: border-box;

		.card {
			box-sizing: border-box;
			padding: 18px;
			border-radius: 12px;
			background-color: #fff;
			margin: 15px auto;
			font-size: 12px;
			color: #3e3e3e;
			.code{
				line-height: 16px;
				font-size: 12px;
				color: #3e3e3e;
				padding-bottom: 15px;
				border-bottom: 1px solid #f1ece7;
			}
			.main{
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #f1ece7;
				padding-bottom: 15px;
				.img{
					width: 81px;
					height: 81px;
				}
				.info{
					width: 235px;
					margin-left: 14px;
					.p1{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 13px;
						line-height: 37px;
						color: #3e3e3e;
					}
					.p2{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
					}
					.p3{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
					}
				}
			}
			.totalPrice{
				font-size: 13px;
				line-height: 18px;
				text-align: right;
				margin-top: 7px;
				color: #3e3e3e;
			}
		}
		.items{
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			padding: 15px;
			background: #fff;
			border-bottom: 1Px solid #f1ece7;
			.ipt{
				text-align: right;
			}
		}
		.upload{
			background-color: #fff;
			padding: 10px;
			.top{
				font-size: 12px;
				padding: 15px 0;
			}
			.uploadImg{
				display: flex;
				align-items: center;
				.list{
					display: flex;
					align-items: center;
					.img{
						width: 60px;
						height: 60px;
					}
				}
			}
		}
		.empty{
			padding: 10px 0;
		}
	}
</style>
